<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
	<meta http-equiv="Pragma" content="no-cache"></meta>
	<title>DOM...</title>
	
	<style>
		.container {
			background: #F4F;
			width: 300px;
			height: 300px;
		}
		.containerBorder {
			border: 25px solid #F4F;
		}
	</style>
</head>
<body>
	<h1 id="h1">DOM</h1>
	<input type="button" id="button"/>
	<script type="text/javascript">
		console.log(document);
		
		var h1 = document.getElementById("h1");
		console.log(h1);
		
		var div = document.createElement("div");
		div.id = "container";
		div.onmouseover = function(e) {
			console.log(e);
		};
		var p = document.createElement("p");
		p.innerHTML = "hoasf poasd aosd fpaosp f";
		div.appendChild(p);
		
		document.body.appendChild(div);
		
		var button = document.getElementById("button"),
			i = 0;
		button.onclick = function(e) {
			if (i === 0) {
				div.className = "container containerBorder";
			} else {
				div.parentNode.removeChild(div);
			}
			i++;
		};
	</script>
</body>
</html>
